<template>
	<view class="choose">
		<view class="topBox">
			<view class="logoBox">
				<image class="logo" src="@/static/m_logo.png" mode="widthFix"></image>
			</view>
			<image class="bgImg" src="@/static/chooseBg.png" mode="widthFix"></image>
		</view>
		<view class="combo">
			<view class="item flex_conter" v-for="(item, index) in pack_list"  :key="index" @click="goSelectPhone(item.pack_id)" >
				<view class="price">￥{{item.pack_money}}</view>
				<view class="left">
					<image class="image" :src="item.pack_avatar" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="title">{{item.pack_name}}</view>
					<view class="text" >
						<mp-html :content="item.pack_des" />
					</view>
					<button class="btn" size="mini">点击选号</button>
				</view>
			</view>
			<!-- <view class="item flex_conter" @click="goSelectPhone(2)">
				<view class="price">￥100.00</view>
				<view class="left">
					<image class="image" src="@/static/yidong.gif" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="title">【老生校园卡】移动5G校园王卡39元 存100元得539元(信阳师范学院)</view>
					<view class="text">100元=校园卡1张（239</view>
				</view>
			</view> -->
		</view>
		
		<view class="contentBox">
			<view class="card">
				<view class="card-title">办理流程</view>
				<view class="content flex_conter">
					<view class="item flex1">
						<image class="image" src="@/static/i1.png" mode="widthFix"></image>
						<view class="text mTop1">1.选择套餐</view>
					</view>
					<view class="item flex1">
						<image class="image" src="@/static/i2.png" mode="widthFix"></image>
						<view class="text mTop1">2.选择号码</view>
					</view>
					<view class="item flex1">
						<image class="image" src="@/static/i3.png" mode="widthFix"></image>
						<view class="text mTop1">3.支付费用</view>
					</view>
					<view class="item flex1">
						<image class="image" src="@/static/i4.png" mode="widthFix"></image>
						<view class="text mTop1">4.领取号卡</view>
					</view>
				</view>
			</view>
			<view class="card" v-if="website.website_introduce && website.website_introduce != ''">
				<view class="card-title">套餐资费介绍</view>
				<view class="content">
					{{website.website_introduce}}
					<!-- <view class="text">【移动校园卡】资费介绍如下:</view>
					<view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">移动5G动感地带39元;</text>
					</view>
					<view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">动感地带plus会员：视频会员含（12个月爱奇艺、腾讯、优酷、PP、芒果TV、哔哩哔哩6大视频）音乐会员（酷狗、酷我、QQ音乐、咪咕音乐） 数字生活（饿了么、滴滴15元代金券、高德15元代金券、青桔单车骑行月卡、网易云音乐会员）等</text>
					</view>
					<view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">20G全国通用流量+100G校园通用流量+300分钟通话+180元视频会员权益 +校园宽带、校园wifi免费用；</text>
					</view>
					<view class="text">以上资费为2021年秋季开学特惠政策</view> -->
				</view>
			</view>
			<view class="card" v-if="website.website_data && website.website_data != ''">
				<view class="card-title">所需资料</view>
				<view class="content">
					{{website.website_data}}
					<!-- <view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">选号时选择的手机号码和号码编号</text>
					</view>
					<view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">本人有效身份证件</text>
					</view>
					<view class="text">
						<uni-icons type="circle-filled" color="#666"></uni-icons>
						<text class="icon-text">到校园网中心领取校园卡</text>
					</view> -->
				</view>
			</view>
			<view class="card">
				<view class="card-title">客服电话</view>
				<view class="content flex_space_a">
					<view class="phone" v-if="website.website_phone_1 && website.website_phone_1 != ''" @click="makePhoneCall(website.website_phone_1)">
						<uni-icons type="phone" color="#3e84fd"></uni-icons>
						<text>{{website.website_phone_1}}</text>
					</view>
					<view class="phone"  v-if="website.website_phone_2 && website.website_phone_2 != ''" @click="makePhoneCall(website.website_phone_2)">
						<uni-icons type="phone" color="#3e84fd"></uni-icons>
						<text>{{website.website_phone_2}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				code:'',
				schoolId:'',
				pack_list:[],
				website:[]
			}
		},
		onLoad(e) {
			this.schoolId = e.schoolId;
			this.code = e.code;
			this.getChoose();
		},
		methods: {
			getChoose(){
				util.requestPost('index/getChoose', {schoolId:this.schoolId,code:this.code}, (res) => {
					if (res.code == 1) {
						console.log(res);
						this.pack_list = res.data.list;
						this.website = res.data.website;
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			goSelectPhone (pack_id) {
				uni.navigateTo({
					url: `/pages/index/selectPhone?pack_id=`+pack_id
				})
			},
			makePhoneCall (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.choose {
	min-height: 100%;
	background-color: $bg-color;
	.topBox {
		position: relative;
		.logoBox {
			padding: 20rpx;
			position: relative;
			z-index: 1;
		}
		.logo {
			width: 140rpx;
			
		}
	}
	.combo {
		padding: 0 20rpx;
		.item {
			padding: 32rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: relative;
			&:not(:last-of-type) {
				margin-bottom: 20rpx;
			}
			.price {
				position: absolute;
				top: 32rpx;
				left: -50rpx;
				z-index: 100;
				width: 220rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 52rpx;
				text-align: center;
				transform: rotate(-45deg);
				background-color: $warning-color;
			}
			.left {
				.image {
					width: 160rpx;
				}
			}
			.right {
				font-size: 22rpx;
				margin-left: 30rpx;
				.title {
					color: $assist-color;
					border-bottom: $border-base;
					font-size: 36rpx;
				}
				.text {
					color: #666;
					border-bottom: $border-base;
				}
				.btn {
					margin: 12rpx 0 0;
					color: #FFFFFF;
					background-color: $primary-color;
				}
			}
		}
	}
	.contentBox {
		padding: 0 20rpx 20rpx;
		.card {
			margin-top: 70rpx;
			position: relative;
			padding: 56rpx 32rpx 50rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			.card-title {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				width: 300rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 12rpx;
				background-color: $primary-color;
				position: absolute;
				top: -36rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			.content {
				.item {
					text-align: center;
					.image {
						width: 100rpx;
					}
				}
			}
			.text {
				color: #666;
				font-size: 28rpx;
				.icon-text {
					margin-left: 8rpx;
				}
			}
		}
	}
}
</style>
